<template>
	<view>
		<view class="search xflex-x-between">
			<view class="xflex-x-between xflex1">
				<image class="searchimg" src="../../static/image/img/search.png" mode=""></image>
				<input type="text" @focus="onfocus" v-model="text" class="xflex1  searchinput"  :placeholder="props.placeholder"/>
				<image class="searchxj" src="../../static/image/img/xiangji.png" mode=""></image>
			</view>
			<view class="searchbtn" @click="search()">
				搜索
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import {ref,reactive,defineProps, watchEffect,defineEmits} from "vue"
	let text = ref("")
	
	const props = defineProps({
		placeholder:{
			default:'请输入'
		},
		disabled:{
			default:false
		},
		focus:{
			default:false
		},
		istopage:{
			default:true
		}
	})
	const emits = defineEmits(['search','focus'])
	
	
	const search = ()=>{
		emits("search",text.value)
	}
	
	const onfocus = () =>{
		if(props.istopage){
			uni.navigateTo({
				url:'/pages/index/searchgoods'
			})
		}
		emits['focus']
	}
	
	
</script>

<style lang="scss" scoped>
.search {
	height: 90rpx;
	background: #F6F6F6;
	border-radius: 20rpx;
	padding: 23rpx 21rpx 23rpx 24rpx;
	box-sizing: border-box;
}

.searchimg {
	width: 44rpx;
	height: 44rpx;
	margin-right: 13rpx;
}

.searchxj{
	width: 44rpx;
	height: 44rpx;
	margin-right: 39rpx;
}

.searchbtn{
	font-family: PingFang SC;
	font-weight: bold;
	font-size: 28rpx;
	color: #010101;
	border-left: 1rpx solid #CCCCCC;
	padding-left: 40rpx;
	
}

.searchinput {
	width: 100%;
}
</style>